<template>
  <div style="width: 95%; height: 95%; min-width: 1000px">
    <div style="height: 100%">
      <el-row style="height: 100%">
        <!-- 左边面板 -->
        <el-col :span="14" style="height: 100%">
          <div class="panelStyle animate__animated animate__bounceInLeft">
            <div style="width: 95%; height: 95%" id="leftPanel">
              <div style="height: 49%; width: 100%; border: #d4d4d4 solid 1px; margin-bottom: 2%; border-radius: 10px">
                <h2>我的词库</h2>
                <div class="leftPanel_inner">
                  <div class="leftPanel_inner_item" v-for="(item, index) in wordList">
                    <h3>
                      <span style="width: 95%">{{ item.title }}</span>
                      <span @click="shareOrCancel(index)"><i class="el-icon-share" :style="{color: (item.isShare == 1 ? '#f7ba2a' : '#eff2f7')}"></i></span>
                    </h3>
                    <div style="margin-left: 8px; color: #797979; margin-top: 12px; height: 45%; width: 93%">
                      <span>
                        {{ item.info.substr(0, 50) + '...' }}
                      </span>
                    </div>
                    <div style="width: 93%; margin-left: 8px; margin-top: 5px; display: flex">
                      <span style="width: 80%; font-size: 14px">{{ item.author }}</span>
                      <el-button type="primary" plain icon="el-icon-document" @click="showContent(item.title, item.id)">查看</el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div style="height: 49%; width: 100%; border: #d4d4d4 solid 1px; border-radius: 10px">
                <h2>我的收藏</h2>
                <div class="leftPanel_inner">
                  <div class="leftPanel_inner_item" v-for="(item, index) in collectionList">
                    <h3>
                      <span style="width: 95%">{{ item.title }}</span>
                      <el-rate v-model="item.isShare" :max="1" disabled @click="collectionOrCancel(index)"></el-rate>
                    </h3>
                    <div style="margin-left: 8px; color: #797979; margin-top: 12px; height: 45%; width: 93%">
                      <span>
                        {{ item.info.substr(0, 50) + '...' }}
                      </span>
                    </div>
                    <div style="width: 93%; margin-left: 8px; margin-top: 5px; display: flex">
                      <span style="width: 80%; font-size: 14px">{{ item.author }}</span>
                      <el-button type="primary" plain icon="el-icon-document" @click="showContent(item.title, item.id)">查看</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 右边面板 -->
        <el-col :span="10" style="height: 100%">
          <div class="panelStyle animate__animated animate__bounceInRight" style="margin-left: 30px;">
            <div style="width: 95%; height: 95%; border: #d4d4d4 solid 1px; border-radius: 10px" id="rightPanel">
              <div style="height: 100%; width: 100%;">
                <h2>创建词库</h2>
                <div style="width: 90%; margin-left: 5%">
                  <p>
                    <span style="width: 20%"><span style="color: red">* </span>词库标题：</span>
                    <el-input v-model="wordsTitle" placeholder="请输入词库标题"></el-input>
                  </p>
                  <p style="align-items: start">
                    <span style="width: 20%"><span style="color: red">* </span>词库描述：</span>
                    <el-input
                        type="textarea"
                        :rows="5"
                        placeholder="词库描述"
                        resize="none"
                        :spellcheck="false"
                        maxlength="150"
                        show-word-limit
                        v-model="wordsDescription">
                    </el-input>
                  </p>
                  <p style="align-items: start">
                    <span style="width: 20%"><span style="color: red">* </span>词库词条：</span>
                    <el-input
                        type="textarea"
                        :rows="20"
                        placeholder="词库词条"
                        resize="none"
                        :spellcheck="false"
                        v-model="wordsContent">
                    </el-input>
                  </p>
                  <p style="justify-content: center;font-size: 14px; color: #afafaf">
                    提示：一行为一个词条
                  </p>
                  <p>
                    <el-button type="primary" plain icon="el-icon-back" style="width: 50%" @click="addLexicon">添加到词库</el-button>
                    <el-button plain icon="el-icon-s-opportunity" style="width: 50%; margin-left: 30px" @click="tips">示例</el-button>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--  查看详情对话框  -->
    <div>
      <el-drawer
          :visible.sync="drawer"
          :with-header="false">
        <div style="width: 100%; height: 97%">
          <div style="width: 90%; height: 98%; margin-left: 5%; margin-top: 4%; display: flex; justify-content: center; flex-direction: column">
            <div style="width: 100%">
              <h2 style="text-align: center; margin: 0px">{{ curTitle }}</h2>
            </div>
            <div style="background-color: #c2c2c2; width: 100%; height: 96%; margin-top: 10px; overflow-x: auto; overflow-y: auto; border-radius: 15px">
              <div style="margin-top: 10px; margin-bottom: 10px">
                <div v-for="item in curList" style="display: flex; justify-content: center">
                  <p style="text-align: center; background-color: #eeeeee; margin: 5px; line-height: 35px; width: 80%; border-radius: 10px">{{ item }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {isEmpty} from "@/util/CommonUtil";
import {GET, POST, POSTData} from "@/util/HttpUtil";

export default {
  name: "MyWords",
  data(){
    return {
      drawer: false,
      cur: -1,
      wordsTitle: '',
      wordsDescription: '',
      wordsContent: '',
      curList: [],
      wordList: [],
      collectionList: [],
      curTitle: '',
      curId: null,
    }
  },
  methods:{
    tips(){
      this.wordsTitle = "示例词库";
      this.wordsDescription = "这是一个示例词库";
      this.wordsContent = "词条A\n词条B\n词条C\n词条D\n词条E";
    },
    addLexicon(){
      if(isEmpty(this.wordsTitle, this.wordsDescription, this.wordsContent)) {
        this.$message.warning("参数缺失！")
        return;
      }
      let data = {
        title: this.wordsTitle,
        info: this.wordsDescription,
        words: this.wordsContent
      }
      POSTData("/api/lexicon/add", data, (res) => {
        if(res.code == 200){
          this.wordsTitle = '';
          this.wordsDescription = '';
          this.wordsContent = '';
          this.getMyLexicon();
        }else {
          this.$message.error(res.msg);
        }
      })
    },
    getMyLexicon(){
      GET("/api/lexicon/listByAccount", res => {
        if(res.code == 200){
          this.wordList = res.data;
        }else {
          this.$message.error(res.msg);
        }
      });
    },
    getMyCollection(){
      GET("/api/lexicon/collection", res => {
        if(res.code == 200){
          this.collectionList = res.data;
        }else {
          this.$message.error(res.msg);
        }
      });
    },
    shareOrCancel(index){
      let lexicon = this.wordList[index];
      POST("/api/lexicon/shareOrCancel?id=" + lexicon.id, res => {
        if(res.code == 200){
          if(lexicon.isShare == 0){
            this.$message.success("词库：【" + lexicon.title + "】 已共享！");
            lexicon.isShare = 1;
          }else {
            this.$message.warning("词库：【" + lexicon.title + "】 取消共享！");
            lexicon.isShare = 0;
          }
        }else {{
          this.$message.error(res.msg);
        }}
      })
    },
    collectionOrCancel(index){
      let lexicon = this.collectionList[index];
      POST("/api/lexicon/collectionOrCancel?id=" + lexicon.id, res => {
        if(res.code == 200){
          this.$message.warning("词库：【" + lexicon.title + "】 取消收藏！");
          this.collectionList.splice(index, 1);
        }else {{
          this.$message.error(res.msg);
        }}
      })
    },
    showContent(title, id){
      this.drawer = true;
      if(id == this.curId && this.curList.length > 0) return;
      this.curTitle = title;
      GET("/api/lexicon/lexiconItem?id=" + id, res => {
        if(res.code == 200){
          this.curId = id;
          this.curList = res.data;
        }else {
          this.$message.warning(res.msg);
        }
      })
    }
  },
  created() {
    this.getMyLexicon();
    this.getMyCollection();
  }
}
</script>

<style scoped>
.panelStyle{
  background-color: white;
  /*box-shadow: #c0dedc 10px 10px 8px;*/
  box-shadow: 0 2px 12px 0 #c0dedc;
  height: 100%;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#leftPanel h2{
  margin-left: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#rightPanel h2{
  margin-left: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.leftPanel_inner{
  height: 84%;
  width: 96%;
  background-color: #f5f8f8;
  margin-left: 2%;
  border-radius: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-wrap: wrap
}
.leftPanel_inner_item{
  width: 31%;
  height: 45%;
  background-color: #d2e1e3;
  margin: 8px;
  border-radius: 8px;
}
.leftPanel_inner_item h3{
  margin: 8px;
  color: #585858;
  display: flex;
}
.leftPanel_inner_item .el-button{
  width: 55px;
  height: 25px;
  padding: 0px;
}
#rightPanel p{
  display: flex;
  align-items: center;
}
</style>
<style>
#leftPanel i{
  cursor: pointer;
}
</style>